// 获取分类列表 并创建option标签追加给select
// console.log(location.search.substr(4));
// 如果是从编辑页面跳转过来 ,就可以获取到地址栏中的id
const id = location.search.substr(4)
// 拿着id 获取文章详情
async function getArticleInfo() {
    // 发送请求
    const res = await reqGetArticleInfo(id)
    console.log(res.data.data) // 文章详情的数据
    // layui中有form.val('表单lay-filter的值', 数据) -- 设置
    form.val('edit', res.data.data)
    form.render('select', 'edit')
    // (2): 让裁剪插件也替换一下
    // 这样直接替换图片是没有问题的 但是图片地址有问题  /uploads/sdsdsdsds.
    // 需要拼接上服务器的基准路径+图片地址
    cropper.replace('http://api-breakingnews-web.itheima.net' + res.data.data.cover_img);
}
// 如果有id 说明是编辑状态 才去获取文章详请
if (id) {
    getArticleInfo()
}
async function getCates() {
    const res = await reqGetCates()
    // console.log(res.data.data);
    res.data.data.forEach(item => {
        // 有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的
        // 可以使用你只需要执行 form.render(type, filter); 方法即可
        const option = `<option value="${item.Id}" lay-verify="cate">${item.name}</option>`
        $('select[name=cate_id]').append(option)
        // 渲染动态创建表单元素 option
        // form.render(type, filter) 参数一是类型 select checkbox radio 参数2是表单lay-filter的值
        form.render('select', 'edit')
    });
    // 重新执行渲染页面默认选中的分类
    getArticleInfo()
}
// 获取分类
getCates()
// 初始化富文本编辑器
initEditor()

// 3. 集成图片裁剪的插件
let cropper;
function initCropper() {
    // 1. 集成裁剪插件
    const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
    cropper = new Cropper(image, {
        aspectRatio: 1, // 横纵比例
        preview: $(".img-preview")
    });
}
initCropper();

// 发布文章
$('.layui-form').on('submit', (e) => {
    e.preventDefault()
    // 创建formData 收集表单信息
    const fd = new FormData($('.layui-form')[0])
    var htmlStr = tinyMCE.activeEditor.getContent() // 富文本编辑器的值
    // console.log(htmlStr);
    // set() 方法会对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。
    fd.set('content', htmlStr)
    // 配置文章封面
    var canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
        width: 100,
        height: 100
    });
    // 调用toBlob 得到blob数据类型
    canvas.toBlob(async function (blobObj) {
        fd.append('cover_img', blobObj)
        // fd.forEach((value, key) => {
        //     console.log(value, key);
        // })
        // 发送请求 
        // const res = await reqPostAddArticle(fd)
        // console.log(res)
        // //  跳转到文章列表
        // location.href = '../list/list.html'
        // 修改的操作---------- 分支 处理 todo-------
        if (id) {
            fd.append('Id', id)
            // fd.forEach((value, key) => {
            //     console.log(value, key);
            // })
            // 编辑提交
            const res = await reqEditArticle(fd)
            console.log(res)
        } else {
            // 发布
            const res = await reqPostAddArticle(fd)
            console.log(res)
        }
        // 跳转到文章列表
        location.href = '../list/list.html'
    })



})








// 扩展  双向绑定机制
// 双向绑定机制  数据会影响视图  视图也会影响数据  vue会讲  vue特性